<template>
    <div class="offering-selection-page">
        <!-- 页面顶部信息 -->
        <div class="page-top-bar">
            <span class="page-title">给 {{ muDetail.name }} 献花</span>
            <el-link :underline="false" class="return-link">返回 {{ muDetail.name }} 的纪念馆首页</el-link>
        </div>

        <!-- 一级分类 Tabs -->
        <el-tabs v-model="activePrimaryTab" class="primary-tabs" @tab-change="handlePrimaryTabChange">
            <el-tab-pane   v-for="item in typeList" :key="item.id" :label="item.name" :name="item.id">
                <!-- "献花" Tab 内容 -->
                <div class="tab-content-wrapper">
                    <p class="selection-prompt">请选择祭品</p>
                    <!-- 二级分类 -->
                    <!-- <div class="secondary-categories">
                        <span>分类：</span>
                        <el-link :underline="false" class="secondary-link active">首页</el-link>
                        <el-link :underline="false" class="secondary-link">鲜花礼物</el-link>
                        <el-link :underline="false" class="secondary-link">花圈花篮</el-link>
                    </div> -->

                    <!-- 主要祭品区域 -->
                    <!-- <div class="offerings-container">
                        <el-radio-group v-model="selectedOffering" class="offerings-grid" >
                            <div v-for="itemObj in libationList" :key="itemObj.id" class="offering-item">
                                <div class="offering-image-placeholder"> -->
                                    <!-- 使用 ElImage 并提供错误插槽作为占位符 -->
                                    <!-- <el-image :src="itemObj.imageUrl" fit="contain">
                                        <template #error>
                                            <div class="image-slot">
												<el-image :src="itemObj.file_url" fit="contain" class="error-image" v-if="itemObj.file_type != 2"></el-image>
                                                <el-image :src="audio_icon" fit="contain" class="error-image" v-if="itemObj.file_type == 2"></el-image>
											</div>
                                        </template>
                                    </el-image>
                                </div>
                                <div class="offering-info">
                                    <el-radio
                                        :label="itemObj.id"
                                        
                                    > -->
                                        <!-- 会员祭品可能对非会员禁用 -->
                                        <!-- {{ itemObj.name }}
                                    </el-radio> -->
                                    <!-- <span v-if="itemObj.isMemberOnly" class="member-only-tag">
                                        升级馆专用
                                        <el-tooltip
                                            content="该祭品仅限升级后的纪念馆使用"
                                            placement="top"
                                        >
                                            <el-icon><QuestionFilled /></el-icon>
                                        </el-tooltip>
                                    </span> -->
                                <!-- </div>
                            </div>
                        </el-radio-group> -->

                        <!-- 分页 -->
                        <!-- <div class="pagination-controls">
                            <pagination v-model="pageInfo" @change="getArticleList" />
                        </div>
                    </div> -->

                    <div class="card-radio-demo">
                        <el-radio-group v-model="selectedOffering" class="card-radio-group">
                            <el-radio
                                v-for="item in libationList" :key="item.id"
                                :label="item.id"
                                class="card-radio"
                            >
                                <div class="card-content">
                                    <img :src="item.file_url" alt="" class="card-img" v-if="item.file_type != 2"/>
                                    <img :src="audio_icon" alt="" class="card-img" v-if="item.file_type == 2"/>
                                    <el-tooltip effect="dark" :content="item.name" placement="top">
                                        <div class="card-name">{{ item.name }}</div>
                                    </el-tooltip>
                                    <!-- <div class="card-name">{{ item.name }}</div> -->
                                </div>
                            </el-radio>
                        </el-radio-group>
                        <!-- <div class="pagination-controls">
                            <pagination v-model="pageInfo" @change="getArticleList" />
                        </div> -->
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>


        <!-- 底部表单区域 -->
        <el-form :model="formData" label-width="auto" class="bottom-form">
            <el-row :gutter="10" align="middle">
                <el-col :span="18">
                    <el-form-item label="签名:">
                        <el-input
                            v-model="formData.sign_name"
                            placeholder="请输入您的姓名"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="留言:">
                        <el-input
                            v-model="formData.content"
                            type="textarea"
                            :rows="4"
                            placeholder="请在此输入您的留言"
                        ></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="验证码:">
                        <div style="display: flex; align-items: center">
                            <el-input
                                v-model="formData.captcha"
                                style="width: 100px; margin-right: 10px"
                            ></el-input>
                            <div class="captcha-image-placeholder">
                                实际项目中这里会是验证码图片
                                <span class="captcha-code">1075</span>
                            </div>
                            <el-link :underline="false" style="margin-left: 10px"
                                >更换验证码</el-link
                            >
                        </div>
                    </el-form-item> -->
                </el-col>
                <el-col :span="6">
                    <div class="disclaimer">
                        <p>
                            今生永恒网郑重提示：纪念活动，敬请保持肃穆！切勿发布与主题不符、违法及广告等信息，留言人须承担一切因其行为而直接或间接导致的民事或刑事法律责任。本站保留追究法律责任的权利，同时今生永恒网开通了在线投诉留言，网友发现此类情况可在投诉留言处举报。
                        </p>
                    </div>
                </el-col>
            </el-row>
            <el-form-item style="margin-top: 15px">
                <el-button type="primary" @click="submitOffering">确认献出</el-button>
                <el-button @click="cancelOffering">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue' // 引入问号图标
import { apiMuJidianCate, apiMuJidianList, apiMuAddLeaveNote } from '@/api/leaveNote'
import { apiMuDetail } from '@/api/graveyard'
import { useRoute, useRouter } from 'vue-router';
import feedback from '@/utils/feedback';
import audio_icon from '../../assets/images/audio_img.jpg'	// 替换为献歌图标 URL
import type { TabPaneName } from 'element-plus'
const route = useRoute();
const router = useRouter();
// --- Reactive Data ---
const activePrimaryTab = ref(1) // 当前选中的一级 Tab
const selectedOffering = ref<string>() // 当前选中的祭品 ID
const currentPage = ref(1)
const totalPages = ref(5) // 假设总共有 5 页
const jumpPage = ref(1)
const isMember = ref(true) // 假设用户是会员，用于测试会员祭品禁用状态


// --- Reactive Data ---
    // 分页数据
    const pageInfo = ref({
        page: 1,
        size: 15,
        count: 0,
        loading: false
    })
    // 表单数据
    const formData = reactive({
        sign_name: '', // 默认值来自图片
        content: '',
        // captcha: ''
        mu_id: route.query.mu_id
    })

    // 根据tab 的 值来输出文本
    const getConsoleText = () => {
        let obj = typeList.value.find((item: any) => item.id == activePrimaryTab.value)
        return obj.name
    }

    // --- Methods ---
    const submitOffering = async () => {
        if(!selectedOffering.value){
            feedback.msgWarning('请选择祭品')
            return false
        }
        console.log('提交献出:', selectedOffering.value, formData)
        // 在实际应用中，这里会发送请求到后端
        let obj = {
            jidian_id: selectedOffering.value
        }
        await apiMuAddLeaveNote({...obj,...formData})
        feedback.msgSuccess(getConsoleText() + '成功')
        formData.content = ''
        formData.sign_name = ''
        selectedOffering.value = ''

        router.go(-1)
    }

    const cancelOffering = () => {
        console.log('取消献花')
        selectedOffering.value = '' // 清空选择
        // 可能需要重置表单等
    }

    // 可以在这里添加获取祭品数据、处理分页等的逻辑
    // watch(jumpPage, (newPage) => { currentPage.value = newPage; /* Fetch data for newPage */ });

	// 祭祀分类
	const typeList = ref<any>([])
	const getTypeList = async () => {
		const res = await apiMuJidianCate()
        let list = res.filter((item: any) => item.status == 1)
		typeList.value = list
        if(route.query.title){
            activePrimaryTab.value = list.find((item: any) => item.name == route.query.title).id
        }else{
            activePrimaryTab.value = list[0].id
        }
		await getLibationList(activePrimaryTab.value)
	}
	// 祭祀列表
	const libationList = ref<any>([])
	const getLibationList = async (id: string | number) => {
		const res = await apiMuJidianList({cid: id})
		libationList.value = res
	}

    const handlePrimaryTabChange = (targetName: TabPaneName) => {
        console.log('切换到:', targetName)
        activePrimaryTab.value = targetName as number
        getLibationList(activePrimaryTab.value)
    }
    const muDetail = ref({})
    const getDetail = async () => {
        const res = await apiMuDetail({id: route.query.mu_id})
        muDetail.value = res
        console.log(res)
    }

    // 分页
    // const getArticleList = async () => {
    //     const data = await apiMuLeaveNoteList({mu_id: props.memorialId, ...pageInfo.value});
    //     articleList.value = data.list;
    //     pageInfo.value.count = data.total
    // }
	onMounted(() => {
        getDetail()
		getTypeList()
	})
</script>

<style scoped>
.offering-selection-page {
    padding: 15px;
    font-family: 'SimSun', 'Microsoft YaHei', sans-serif;
    font-size: 12px;
    color: #333;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.page-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.page-title {
    font-size: 14px;
    font-weight: bold;
    color: #d9534f; /* 类似原图的橙红色 */
}

.return-link {
    font-size: 12px;
}

/* Element Plus Tabs 样式微调 */
.primary-tabs :deep(.el-tabs__header) {
    margin-bottom: 10px;
}
.primary-tabs :deep(.el-tabs__item) {
    height: 30px; /* 调整 Tab 高度 */
    line-height: 30px;
    font-size: 12px;
    padding: 0 15px;
}
.primary-tabs :deep(.el-tabs__item.is-active) {
    background-color: #f0ad4e; /* 类似原图的橙色 */
    color: #fff;
    border-radius: 3px 3px 0 0;
    border-color: #eea236;
}
.primary-tabs :deep(.el-tabs__nav-wrap::after) {
    height: 1px; /* 底线变细 */
    background-color: #ddd;
}

.primary-tabs :deep(.el-tabs__header .el-tabs__nav-wrap)::after {
	/* background-color: transparent; */
}
.primary-tabs :deep(.el-tabs__header .el-tabs__item:nth-child(2)) {
	padding-left: 15px !important;
}
.primary-tabs :deep(.el-tabs__header .el-tabs__item:last-child) {
	padding-right: 15px !important;
}
.primary-tabs :deep(.el-tabs__active-bar) {
	display: none;
}
.tab-content-wrapper {
    padding: 10px;
}

.selection-prompt {
    font-weight: bold;
    margin-bottom: 8px;
}

.secondary-categories {
    margin-bottom: 10px;
}
.secondary-categories span {
    margin-right: 5px;
}
.secondary-link {
    margin-right: 10px;
    font-size: 12px;
    color: #337ab7;
}
.secondary-link.active {
    font-weight: bold;
    color: #d9534f; /* 激活状态颜色 */
    text-decoration: none;
}

.offerings-container {
    border: 1px solid #ddd;
    padding: 15px;
    background-color: #fff; /* 白色背景 */
}

.offerings-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 列布局，更接近原图 */
    gap: 20px 15px; /* 行间距和列间距 */
}

.offering-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.offering-image-placeholder {
    width: 80px; /* 根据需要调整大小 */
    height: 80px; /* 根据需要调整大小 */
    margin-bottom: 5px;
    display: flex; /* 使 ElImage 正常工作 */
    justify-content: center;
    align-items: center;
    border: 1px solid #eee; /* 图片边框 */
}
.offering-image-placeholder .el-image {
    max-width: 100%;
    max-height: 100%;
}
.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #c0c4cc;
    font-size: 12px;
}

.offering-info {
    display: flex;
    flex-direction: column; /* 让会员标识在下方 */
    align-items: center;
    margin-top: 5px;
}

/* 单选按钮样式调整 */
.offering-info :deep(.el-radio) {
    margin-right: 0; /* 移除默认右边距 */
}
.offering-info :deep(.el-radio__label) {
    font-size: 12px;
    padding-left: 5px; /* 文字与按钮间距 */
}

.member-only-tag {
    font-size: 10px;
    color: #d9534f; /* 红色提示 */
    margin-top: 3px; /* 与名称间距 */
    display: flex;
    align-items: center;
}
.member-only-tag .el-icon {
    margin-left: 3px;
    cursor: help;
}

.pagination-controls {
    margin-top: 20px;
    text-align: center;
}
.pagination-controls .el-link {
    margin: 0 5px;
    font-size: 12px;
}
.pagination-controls span {
    margin: 0 5px;
}

.bottom-form {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #ccc; /* 分隔虚线 */
}
.bottom-form :deep(.el-form-item) {
    margin-bottom: 10px; /* 减少表单项间距 */
}
.bottom-form :deep(.el-form-item__label) {
    font-size: 12px;
    text-align: right;
    padding-right: 5px; /* 标签右侧填充 */
    width: 50px !important; /* 固定标签宽度 */
}
/* 使输入框适应容器 */
.bottom-form :deep(.el-form-item__content) {
    margin-left: 50px !important; /* 与标签宽度一致 */
}

.captcha-image-placeholder {
    width: 60px;
    height: 28px;
    border: 1px solid #ccc;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    vertical-align: middle; /* 与输入框和链接对齐 */
}
.captcha-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    font-weight: bold;
    color: #555;
    letter-spacing: 2px; /* 增加字符间距 */
}

.disclaimer {
    font-size: 11px;
    color: #888;
    line-height: 1.5;
    padding: 5px;
    border: 1px solid #eee;
    background-color: #f9f9f9;
    height: 100%; /* 让它填充 Col 的高度 */
    box-sizing: border-box; /* 包含边框和内边距 */
}
.disclaimer p {
    margin: 0;
}













.card-radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

:deep(.card-radio) {
  display: inline-block;
  height: 100%;
  --el-radio-input-display: none; /* 隐藏原始 radio */
  --el-radio-input-width: 0; /* 隐藏原始 radio */
  --el-radio-input-height: 0; /* 隐藏原始 radio */
}
:deep(.el-radio__input){
    display: none !important;
}
.card-content {
  width: 140px;     /* 固定宽度 */
  height: 140px;    /* 固定高度 */
  border: 2px solid #dcdfe6;
  border-radius: 12px;
  text-align: center;
  padding: 12px;
  transition: all 0.3s;
  cursor: pointer;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.card-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin: 0 auto 8px;
  border-radius: 8px;
}

.card-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;       /* 不换行 */
  overflow: hidden;          /* 超出隐藏 */
  text-overflow: ellipsis;   /* 显示省略号 */
}

:deep(.el-radio.is-checked .card-content) {
  border-color: #409eff;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.4);
}
</style>
